<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>推送账号管理</el-breadcrumb-item>
      <el-breadcrumb-item>
        <span class="u-cursor" @click="$router.back()">计划管理</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>{{ pageTitle }}账号</el-breadcrumb-item>
    </el-breadcrumb>
    <Container class="u-pb60">
      <el-form
        class="m-form--detail"
        label-width="160px"
        :model="pageData"
        :rules="pageRules"
        ref="pageForm"
      >
        <ContainerTitle>创建群推送</ContainerTitle>
        <ContainerTitle>选中模板</ContainerTitle>
        <el-form-item label="选择模板">
          <el-radio-group
            v-model="pageData.type"
            :disabled="pageAction == 'detail'"
          >
            <el-radio :label="1">快手推送模板</el-radio>
            <el-radio :label="2">头条推送模板</el-radio>
            <el-radio :label="3">头条-新平台推送模板</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="模板示意图">
          <div class="text-info">
            <img
              src="../../assets/img/ksmb.jpg"
              alt=""
              v-if="pageData.type == 1"
            />
            <img
              src="../../assets/img/ttmb.jpg"
              alt=""
              v-if="pageData.type == 2"
            />
            <img
              src="../../assets/img/ttmbnew.jpg"
              alt=""
              v-if="pageData.type == 3"
            />
            <!-- <div class="text-info">
              【说明】<br />
              1、数据推送至钉钉群时间：<br />
              每日00:00、1:00、2:00、3:00、4:00、5:00、6:00、7:00、8:00、9:00、10:00、11:00、12:00、13:00、14:00、15:00、16:00、17:00、18:00、19:00、20:00、21:00、22:00、23:00<br />
              2、数据范围：当日数据、昨日数据<br />
              3、当日和昨日均无数据字段自动不展示
            </div> -->
          </div>
        </el-form-item>
        <ContainerTitle>配置字段</ContainerTitle>
        <el-form-item label="产品名称" prop="productName">
          <el-input
            class="u-w350"
            placeholder="1-10个汉字"
            v-model="pageData.productName"
            rows="5"
            maxlength="20"
          ></el-input>
          <div class="text-info u-w350 u-mt15">
            <img src="../../assets/img/cpmc.jpg" alt="" style="width: 100%" />
            【说明】示例图中红框处为产品名称
          </div>
        </el-form-item>
        <el-form-item label="设置列字段">
          <el-row
            v-for="(item, index) in columnFieldList"
            :key="index"
            class="u-mb10"
          >
            <el-col :span="4" class="u-ml10"
              ><el-select
                placeholder="请选择账户"
                filterable
                v-model="item.columnType"
                @change="handleChangeAccount"
                :disabled="index == 0"
              >
                <el-option
                  v-for="item in accountOptions"
                  :key="item.type"
                  :label="item.name"
                  :value="item.type"
                ></el-option> </el-select
            ></el-col>
            <el-col :span="4" class="u-ml10"
              ><el-select
                placeholder="请选择账户标签"
                filterable
                v-model="item.label"
                @change="handleChangeLabel"
              >
                <el-option
                  v-for="item in labelOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option> </el-select
            ></el-col>
            <el-col :span="4" class="u-ml10">
              <el-input
                placeholder="账户ID:从媒体后台获取"
                v-if="item.columnType == 0"
                v-model="item.id"
              ></el-input
            ></el-col>
            <el-col :span="4" class="u-ml10"
              ><el-input
                placeholder="账户昵称:客户可见,1-10个汉字"
                v-model="item.nickName"
              ></el-input
            ></el-col>
            <el-col :span="3" class="u-ml10"
              ><el-button
                size="small"
                type="primary"
                class="u-ml10"
                @click="addNext(index)"
                >添加下一行</el-button
              >
            </el-col>
            <el-col :span="3" v-if="index != 0" class="u-ml10">
              <el-button size="small" class="u-ml10" @click="deleteNext(index)"
                >删除</el-button
              >
            </el-col>
          </el-row>
          <!--           <div
            v-for="(item, index) in columnFieldList"
            :key="index"
            class="u-mb10"
          >
            <el-select
              placeholder="请选择账户"
              filterable
              v-model="item.columnType"
              @change="handleChangeAccount"
              :disabled="index == 0"
            >
              <el-option
                v-for="item in accountOptions"
                :key="item.type"
                :label="item.name"
                :value="item.type"
              ></el-option>
            </el-select>
            <el-select
              placeholder="请选择账户标签"
              filterable
              v-model="item.label"
              v-if="item.columnType == 0"
              @change="handleChangeLabel"
            >
              <el-option
                v-for="item in labelOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <el-input
              class="u-ml10"
              placeholder="账户ID:从媒体后台获取"
              v-if="item.columnType == 0"
              v-model="item.id"
            ></el-input>
            <el-input
              class="u-ml10"
              placeholder="账户昵称:客户可见,1-10个汉字"
              v-model="item.nickName"
            ></el-input>
            <el-button
              size="small"
              type="primary"
              class="u-ml10"
              @click="addNext"
              >添加下一行</el-button
            >
            <el-button
              size="small"
              class="u-ml10"
              @click="deleteNext(index)"
              v-if="index != 0"
              >删除</el-button
            >
          </div> -->
          <div class="text-info u-mt15">
            <!-- 【说明】<br />
            1、展示顺序：根据添加顺序展示，例如 -->
            <img src="../../assets/img/ziduan-1.jpg" alt="" />
            <!--  2、小计字段说明:<br />
            ①需要设置小计字段，如未设置则不进行小计<br />
            ②相同标签的账户一起进行小计，与账户位置无关。 -->
            <img src="../../assets/img/ziduan-2.jpg" alt="" />
          </div>
        </el-form-item>
        <el-form-item label="设置行字段">
          <div v-if="pageData.type == 1">
            <div class="u-black">快手展示行字段</div>
            <el-checkbox-group
              v-model="pageData.rowFleid"
              @change="checkedRowChange"
            >
              <el-checkbox
                v-for="(item, index) in pageData.rowFleIdList"
                :key="index"
                :label="item.name"
                :disabled="item.required"
                >{{ item.name }}</el-checkbox
              >
              <!--  <el-checkbox
                v-for="item in customColumn"
                :key="item.key"
                :label="item.value"
                >{{ item.label }}</el-checkbox
              > -->
            </el-checkbox-group>
          </div>
          <div v-else>
            <div class="u-black">头条模板展示行字段</div>
            <el-checkbox-group
              v-model="pageData.ttrowFleid"
              @change="checkedRowChange"
            >
              <el-checkbox
                v-for="(item, index) in pageData.ttrowFleIdList"
                :key="index"
                :label="item.name"
                :disabled="item.required"
                >{{ item.name }}</el-checkbox
              >
              <!--  <el-checkbox
                v-for="item in customColumn"
                :key="item.key"
                :label="item.value"
                >{{ item.label }}</el-checkbox
              > -->
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item label="返点" prop="factor">
          <el-input
            class="u-w350 u-ml10"
            placeholder="最多两位小数点"
            v-model="pageData.factor"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div class="u-w500 bg-purple-light text-info u-mt15">
            【说明】<br />
            1、返点默认：1<br />
            2、直接根据输入的数字计算。 例如：<br />
            花费：100、返点：1.07 现金消耗=花费/返点=100/1.07<br />
            3、模板中涉及返点字段：<br />
            快手模板中：今日/昨日现金激活成本、今日/昨日现金注册成本、激活成本环比、注册成本环比、表单成本环比、新增付费成本环比<br />
            以上字段计算公式中均会涉及返点<br />
            头条模板中：今日/昨日现金消耗、今日/昨日现金转化成本、今日/昨日现金注册成本、昨日现金深度转化成本、现金注册成本环比、现金深度转化成本环比<br />
            以上字段计算公式中均会涉及返点
          </div>
        </el-form-item>
      </el-form>
    </Container>
    <Affix :offset-bottom="0">
      <ButtonGroup isFixed align="right">
        <el-button size="small" @click="$router.back()">返回</el-button>
        <el-button size="small" type="primary" @click="handleEnsure"
          >确定</el-button
        >
      </ButtonGroup>
    </Affix>
  </div>
</template>

<script>
import ContainerTitle from "@/components/container-title";
import Container from "@/components/container";
import Affix from "@/components/affix";
import ButtonGroup from "@/components/button-group";

import { mapOptionLabel } from "@/util";
import { OPERATOR_OPTION } from "@/assets/js/flow-option";
const validateMoney = (rule, value, callback) => {
  var patrn = /^\d+(\.\d+)?$/;
  if (value == "") {
    callback(new Error("请输入出价"));
  } else if (value.indexOf(".") != -1 && value.split(".")[1].length > 2) {
    callback(new Error("最多输入两位小数点")); //小数点后两位
  } else if (!patrn.exec(value)) {
    callback(new Error("请您输入数字")); //防止输入多个小数点
  } else {
    callback();
  }
};
export default {
  components: {
    ContainerTitle,
    Container,
    Affix,
    ButtonGroup,
  },
  data() {
    return {
      OPERATOR_OPTION,
      pageAction: this.$route.query.action,
      /*  rowList: [
        { value: "日期", required: true },
        { value: "账户", required: true },
        { value: "时间", required: true },
        { value: "账户消耗", required: true },
        { value: "现金消耗", required: true },
      ],
      rowFleid:"", */
      columnFieldList: [{ columnType: 0, label: 0, id: "", nickName: "" }],
      id: "",
      accountOptions: [
        { type: 0, name: "账户" },
        { type: 2, name: "小计" },
      ],
      labelOptions: [
        { name: "请选择账户标签", id: 0 },
        { name: "1组", id: 1 },
        { name: "2组", id: 2 },
        { name: "3组", id: 3 },
        { name: "4组", id: 4 },
        { name: "5组", id: 5 },
        { name: "6组", id: 6 },
        { name: "7组", id: 7 },
        { name: "8组", id: 8 },
        { name: "9组", id: 9 },
      ],
      pageData: {
        type: 1, //模板类型
        productName: "", //产品名称
        columnField: "", //列字段
        factor: "1", //返点
        rowFleid: [
          "日期",
          "账户",
          "时间",
          "账户消耗",
          "现金消耗",
          "时间",
          "昨日账户消耗",
          "昨日现金消耗",
        ], //快手行字段
        ttrowFleid: ["日期","时间", "账户", "消耗", "时间", "昨日消耗"], //头条行字段
        rowFleIdList: [
          { name: "日期", required: true },
          { name: "账户", required: true },
          { name: "时间", required: true },
          { name: "账户消耗", required: true },
          { name: "现金消耗", required: true },
          { name: "激活数", required: false },
          { name: "现金激活成本", required: false },
          { name: "注册数", required: false },
          { name: "现金注册成本", required: false },
          { name: "注册CVR", required: false },
          { name: "表单提交数", required: false },
          { name: "表单提交成本", required: false },
          { name: "新增付费人数", required: false },
          { name: "新增付费成本", required: false },
          {name:"首日付费金额",require:false},
          {name:"首日ROI",require:false},
          {name:"次留数",require:false},
          {name:"次留率",require:false},
          {name:"次留成本",require:false},
          {name:"数据行为率",require:false},
          {name:"3秒播放率",require:false},
          { name: "时间", required: true },
          { name: "昨日账户消耗", required: true },
          { name: "昨日现金消耗", required: true },
          { name: "昨日激活数", required: false },
          { name: "昨日现金激活成本", required: false },
          { name: "昨日注册数", required: false },
          { name: "昨日现金注册成本", required: false },
          { name: "昨日注册CVR", required: false },
          { name: "昨日表单提交数", required: false },
          { name: "昨日表单提交成本", required: false },
          { name: "昨日新增付费人数", required: false },
          { name: "昨日新增付费成本", required: false },
          { name: "昨日数据行为率", required: false },
          { name: "昨日3秒播放率", required: false },
          { name: "消费环比", required: false },
          { name: "激活成本环比", required: false },
          { name: "注册成本环比", required: false },
          { name: "表单成本环比", required: false },
          { name: "新增付费成本环比", required: false },
        ],
        ttrowFleIdList: [
          { name: "日期", required: true }, 
          { name: "时间", required: true },
          { name: "账户", required: true },
          { name: "消耗", required: true },
          { name: "现金消耗", required: false },
          { name: "展示", required: false },
          { name: "点击", required: false },
          { name: "CTR", required: false },
          { name: "CPM", required: false },
          { name: "CPC", required: false },
          {name:"关键行为量",required:false},
          {name:"关键行为成本",required:false},
          {name:"关键行为率",required:false},
          {name:"次留数",required:false},
          {name:"次留率",required:false},
          {name:"激活数",required:false},
          {name:"激活成本",required:false},
          {name:"次留成本",required:false},
          { name: "转化数", required: false },
          { name: "转化成本", required: false },
          {name:"现金转化成本",required:false},
          { name: "转化率", required: false },
          { name: "注册数", required: false },
          { name: "注册成本", required: false },
          { name: "现金注册成本", required: false },
          { name: "深度转化数", required: false },
          { name: "深度转化成本", required: false },
          { name: "时间", required: true },
          { name: "昨日消耗", required: true },
          { name: "昨日现金消耗", required: false },
          { name: "昨日次留数", required: false },
          { name: "昨日次留成本", required: false },
          { name: "昨日次留率", required: false },
          { name: "昨日激活数", required: false },
          { name: "昨日激活成本", required: false },
          { name: "昨日转化数", required: false },
          { name: "昨日转化成本", required: false },
          { name: "昨日现金转化成本", required: false },
          { name: "昨日转化率", required: false },
          { name: "昨日注册数", required: false },
          { name: "昨日注册成本", required: false },
          { name: "昨日深度转化数", required: false },
          { name: "昨日深度转化成本", required: false },
          { name: "昨日现金深度转化成本", required: false },
          { name: "消耗环比", required: false },
          { name: "转化成本环比", required: false },
          { name: "现金转化成本环比", required: false },
          { name: "注册成本环比", required: false },
          { name: "现金注册成本环比", required: false },
          { name: "深度转化成本环比", required: false },
          { name: "现金深度转化成本环比", required: false },
        ],
      },
      pageRules: {
        platformId: {
          required: true,
          message: "请选择平台名称",
          trigger: ["change", "blur"],
        },
        productName:{
          required: true,
          message: "请填写产品名称",
          trigger: ["blur"],
        },
        factor: {
          required: true,
          trigger: ["blur"],
          validator: validateMoney,
        },
        username: {
          required: true,
          message: "请输入登录账号",
          trigger: ["change", "blur"],
        },
        accountId: {
          required: true,
          validator: (rule, value, callback) => {
            if (this.pageData.platformId === 15) {
              if (!value) {
                callback(new Error("请输入快手ID"));
              } else {
                callback();
              }
            } else {
              callback();
            }
          },
          trigger: ["change", "blur"],
        },
        customerId: {
          required: true,
          message: "请选择客户名称",
          trigger: ["change", "blur"],
        },
        productId: {
          required: true,
          message: "请选择产品名称",
          trigger: ["change", "blur"],
        },
      },
    };
  },
  computed: {
    pageTitle() {
      return {
        create: "新增",
        edit: "编辑",
        detail: "查看",
      }[this.pageAction];
    },
    sureParams() {
      let dailyAccounts = [],
        noId = false,
        noName = false,
        noLabel = false;
      this.columnFieldList.forEach((item) => {
        if (item.id == "" && item.columnType == 0 ) {
          noId = true;
          /* this.$message.error("请填写账户ID");
          return false; */
        }
        if (item.nickName == "") {
          noName = true;
          /* this.$message.error("请填写账户昵称");
          return false; */
        }
        if(item.label == "0"){
          noLabel = true;
        }
        dailyAccounts.push({
          accountId: item.id,
          accountName: item.nickName,
          accountType: item.label,
          totalType: item.columnType,
        });
      });
      if (noId == true) {
        this.$message.error("请填写账户ID");
        return false;
      }
      if (noName == true) {
        this.$message.error("请填写账户昵称");
        return false;
      }
      if(noLabel == true){
         this.$message.error("请选择账户标签");
        return false;
      }
      return {
        id: this.id, //账户ID
        dailyAccount: dailyAccounts,
        productName: this.pageData.productName,
        customColumn: this.pageData.type == 1 ? this.pageData.rowFleid: this.pageData.ttrowFleid,
        factor: this.pageData.factor,
        type: this.pageData.type,
      };
    },
  },
  methods: {
    mapOptionLabel,
    handleEnsure() {
      /*  console.log(this.sureParams); */
      let params = this.sureParams;
      if (params) {
        this.$refs.pageForm.validate((valid) => {
          if (valid) {
            this.$http({
              method: "post",
              url: "/marketing/api/daily/editor",
              data: params,
            }).then((res) => {
              if (res.data.code === 1) {
                this.$message.success(res.data.msg);
                this.$router.back();
              } else {
                this.$message.error(res.data.msg);
              }
            });
          }
        });
      }
    },
    checkedRowChange(value) {
     /*  console.log(value) */
    },
    handleChangeAccount() {},
    handleChangeLabel() {},
    getDetailInfo() {
      this.$http({
        method: "get",
        url: "/marketing/api/daily/getById",
        params: { id: this.id },
      }).then((res) => {
        if (res.data.code === 1) {
          this.columnFieldList = [];
          this.pageData.factor = res.data.data.factor;
          this.pageData.productName = res.data.data.productName;
          this.pageData.type = res.data.data.type;
          if (res.data.data.customColumn != null && res.data.data.customColumn.length > 0 && res.data.data.customColumn[0] !="") {
            if(this.pageData.type == 1){
              this.pageData.rowFleid = res.data.data.customColumn;
            }else{
               this.pageData.ttrowFleid = res.data.data.customColumn;
            }
          }
          let dailyAccount = res.data.data.dailyAccount;
          dailyAccount.forEach((item) => {
            if (item.totalType != 1) {
              this.columnFieldList.push({
                id: item.accountId,
                nickName: item.accountName,
                label: item.accountType,
                columnType: item.totalType,
              });
            }
          });
        } else {
        }
      });
    },
    addNext(index) {
      // this.columnFieldList.push({
      //   columnType: 0, //账户类型
      //   label: 0, //标签
      //   id: "", //id
      //   nickName: "", //昵称
      // });
      this.columnFieldList.splice(index+1, 0, {
        columnType: 0, //账户类型
        label: 0, //标签
        id: "", //id
        nickName: "", //昵称
      });
    },
    deleteNext(index) {
      this.columnFieldList.splice(index, 1);
    },
  },
  created() {
    this.id = this.$route.query.id;
    if (this.$route.query.editor) {
      this.getDetailInfo();
    }
  },
};
</script>
<style scoped>
.text-info {
  padding: 10px;
}
img {
  display: block;
  /* margin: 0 auto; */
  /* width: 100%; */
}
</style>